<template>
    <div class="easyd-weixin-Box">
        <mt-loadmore
                :top-method="loadTop"
                :bottom-method="loadBottom"
                :bottom-all-loaded="allLoaded"
                ref="loadmore"
        >
            <div class="app_page">
                <div class="today_reading_list app_box_content_list app_list_box" v-for="item in readData">
                    <div class="today_reading_info">
                        <div class="app_box_flex">
                            <div class="txt_img">
                                <!--{{item.apurr_nickname.substring(0,1)}}-->
                                <img :src="item.apurr_header" alt="">
                            </div>
                            <div class="app_box_content_left" style="font-size:14px;">
                                {{item.apurr_nickname}}
                                <span v-if="item.customerPosition == '0'" class="C4">(游客)</span>
                                <span v-if="item.customerPosition == '1'" class="C4">(客户)</span>
                                <span v-if="item.customerPosition == '2'" class="C4">(会员)</span>
                            </div>
                            <div class="app_box_content_right" style="font-size:12px;">
                                {{$common.dateFormat("YYYY/MM/dd",item.apurr_create_time)}}
                            </div>
                        </div>
                    </div>
                    <div class="today_reading_time app_box_flex C2 T3">
                        <div class="app_box_flex_1">
                            阅读：{{item.apurr_read_count}}
                        </div>
                        <div class="app_box_flex_1">
                            分享：{{item.apurr_share_count}}
                        </div>
                        <div class="app_box_flex_1 click_btn">
                            <span v-if="item.customerPosition == '0'" style="color:green" @click="addCustomer(item)">加入客户库</span>
                            <span v-if="item.customerPosition == '1'" @click="goFollowUp(item)">查看详情</span>
                            <span v-if="item.customerPosition == '2'" @click="showTips()">查看详情</span>
                        </div>
                    </div>
                </div>

            </div>
        </mt-loadmore>
    </div>
</template>

<script>
    import {mapState, mapMutations} from "vuex";

    export default {

        data() {
            return {
                skip: 0,
                limit: 20,
                allLoaded: false,
            };
        },
        computed: {
            ...mapState({
                readData: state => state.TodayReadingModule.readData
            })
        },
        mounted() {

            this.initTitle();
            this.initData('init');

        },
        methods: {
            addCustomer(item) {

                console.log(item);
                this.$easyUtil.GO(this, '/addClient', {wx_nickname: item.apurr_nickname, openid: item.apurr_openid})
            },
            loadTop() {
                this.skip = 0;
                this.limit = 20;
                this.initData('refresh');
            },
            loadBottom() {
                this.skip += this.limit;
                this.initData('more');
            },
            initData(type) {

                if (type == 'init') {
                    this.$easyUtil.startLoading(this);
                }

                this.$http.getHttp(
                    this.$API.communicationRelatedCommunicationBrowse + "/todayOrTotal/" + this.$route.query.readType + "/u_id/" + this.$userData.getUID() + "/u_type/" + this.$userData.getOsType() + "/u_is_manager/" + this.$userData.getIsManager() + "/skip/" + this.skip + "/limit/" + this.limit,
                    rs => {

                        if (type == 'init') {
                            this.$store.commit("TodayReadingModule/updateReadData", rs.browseMember);
                            this.$easyUtil.endLoading(this);
                            console.log(rs)

                        }

                        if (type == 'refresh') {
                            this.$store.commit("TodayReadingModule/updateReadData", rs.browseMember);
                            this.$refs.loadmore.onTopLoaded();

                        }

                        if (type == 'more') {
                            console.log('查询更多...')

                            //重新构建数据
                            this.$store.commit("TodayReadingModule/moreReadData", rs.browseMember);

                            if (rs.browseMember < 20) {
                                this.allLoaded = true;
                            }

                            this.$refs.loadmore.onBottomLoaded();
                        }

                    });
            },
            showTips() {
                this.$easyUtil.alert(this, "提示", "该用户不是你的客户！")
            },
            goFollowUp(item) {
                this.$easyUtil.GO(this, '/userDetail', {customerId: item.c_id})
            },
            initTitle() {
                switch (this.$route.query.readType) {
                    case '0':
                        document.title = '今日阅读';
                        break;
                    case '1':
                        document.title = '全部阅读';
                        break;
                    default:
                        break;
                }
            }
        }
    };
</script>

<style lang="stylus" scoped>
    @import '~PUBLIC_CSS';
    .today_reading_time {
        align-items: center;
    }

    .today_reading_time .click_btn {
        border: 1px solid #ccc;
        border-radius: 4px;
        text-align: center;
        height: 20px;
        line-height: 20px;
        color: #999;
    }

    .today_reading_list {
        overflow: hidden;
    }

    .today_reading_list .txt_img {
        display: block;
        height: 20px;
        width: 20px;
        margin: 5px;
        float: left;
        border-radius: 50%;
        object-fit: cover;
        overflow hidden
    }

    .today_reading_list .txt_img > img {
        height: 20px;
        width: 20px;
        padding 0
    }

    .today_reading_list img {
        display: block;
        height: 50px;
        width: 70px;
        padding: 5px 10px 5px 0;
        float: left;
        object-fit: cover;
    }
</style>